經過昨天對於對於模板綁定的介紹，各位對於 v 開頭的綁定系列應該有初步了解了
那今天呢，就是要跟各位補充一個也很實用的「樣式綁定」喔！

樣式綁定

當我們想在網頁上加入樣式去美化時，第一反應都會透過 style 屬性或是在 html 的標籤的 class 做處理。那今天我們要提供給各位一個更好用的方法。

在 Day14 中我們有跟各位介紹到 v-bind，除了可以控制屬性外，也可以用來控制標籤的 class 與樣式 style 的內容。

比如我今天想要做一個可以判斷樣式功能的話：當使用者在輸入框書輸入的文字超過 5 個字時，就會將所有文字變成粗體，且顏色也更改為「藍色」：

首先我們在模板中放上一個 input，並將他與 v-model 做資料雙向連接，且在標籤中放上一個 v-bind 將他的 class 屬性中放入判斷式：'Exceed': iThome.length > 5：

<template>
  <input type="text" v-model="iThome" v-bind:class="{ 'Exceed': iThome.length > 5 }">
</template>

接著，在 data 中定義一個字串的屬性：

<script>
export default {
  data() {
    return {
      iThome: "",
    };
  },
};
</script>

最後我們在 style 的樣式中，加上當判斷式 = true 時，會觸發的樣式：

<style>
.Exceed {
  border: red solid 1px;
  color: red;
  font-weight:bold;
}
</style>

這樣就可以達成我們的需求拉，最後來看看網頁的表現：

由此可見，我們可以透過 v-bind:class 來設定條件：當使用者輸入的文字長度超過10個字時，就會讓 input 裡的文字樣式加上 style 裡的 Exceed。

最後給各位完整的程式碼參考：

<template>
  <div>
    <input
      type="text"
      v-model="iThome"
      v-bind:class="{ Exceed: iThome.length > 5 }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "",
    };
  },
};
</script>

<style>
.Exceed {
  border: red solid 1px;
  color: red;
}
</style>

當然，如果想要一次控制多個 class 也是沒問題的：

v-bind:class="{ length_five: iThome.length > 5, length_ten: iThome.length > 10 }"

就像這樣，我們在兩個判斷式中加上逗號。

而上方程式碼的用意是：當使用者輸入的字數長度超過 5 個字時，就會將文字顏色變成「紅色」，而如果輸入的字數長度超過 10 個字時，文字顏色將變為「藍色」。

接著到 style 中加上超過10個字後會觸發的事件：

<style>
.length_five {
  color: red;
}

.length_ten {
  color: blue;
}
</style>

讓我們來看看網頁的表現：

最後來看看完整的程式碼：

<template>
  <div>
    <input
      type="text"
      v-model="iThome"
      v-bind:class="{
        length_five: iThome.length > 5,
        length_ten: iThome.length > 10,
      }"
    />
    <p id="a">{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "",
    };
  },
};
</script>

<style>
.length_five {
  color: red;
}

.length_ten {
  color: blue;
}
</style>

那當然除了在 v-bind 中更改 class 的屬性外，也能直接到 style 操作：

首先，我們一樣在網頁中放上一個輸入框，並做一個資料可以雙向連接的 v-model，再加上一個 v-bind 方便我們在 computed 中做運算判斷式

<template>
  <div>
    <input type="text" v-model="iThome" :style="iThomeStyle" />
  </div>
</template>

接著我們需要呼叫一個 computed 來協助我們做運算，首先，我們定義一個函數並讓其做判斷自述長度的功能 iThome.length < 5 (當使用者在輸入框輸入的字數長度小於 5 個字時):：

computed: {
  length_five: function () {
    return this.iThome.length < 5;
  },
}

完成以後，在定義一個函式並讓其內容為：{ color: this.length_five ? "" : "red" }，這段程式碼的意思是，當我剛剛定義的函示(length_five)不符合時，就讓他的顏色呈現紅色，而程式碼中的問號 ？ 就是 false 的意思：

iThomeStyle: function () {
   return { color: this.length_five ? "" : "red" };
},

那現在我們在 computed 中最重要的兩個函式已經出來了！接者就是讓他們結合成一段程式碼：

<script>
export default {
  data() {
    return {
      iThome: "",
    };
  },
  computed: {
    length_five: function () {
      return this.iThome.length < 5;
    },
    iThomeStyle: function () {
      return { color: this.length_five ? "" : "red" };
    },
  },
};
</script>

讚，這樣就完成了！接下來就來看看網頁的表現：

由此可見，就算不在 style 中做樣式的變化，使用 v-bind 與 computed 的結合也可以使我們想要的物件做判斷並修改他的樣式，這兩種方法是不是都很方便呢 >///<，最後一樣附上完整的程式碼：

<template>
  <div>
    <input type="text" v-model="iThome" :style="iThomeStyle" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      iThome: "",
    };
  },
  computed: {
    length_five: function () {
      return this.iThome.length < 5;
    },
    iThomeStyle: function () {
      return { color: this.length_five ? "" : "red" };
    },
  },
};
</script>

那我們今天對於 v-bind 的樣式綁定介紹就到這裡告一段落了，謝謝大家的觀看